<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .goods-num{
            display: inline-block;
            width: 60px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1">
            <thead>
              <tr>
                <th><input type="checkbox" id="checkall"></th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
              </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for="(product,index) in cartInfo.data.cartModels">
                    <td><input type="checkbox" class="check-item"></td>
                    <td>{{product.name}}</td>
                    <td class="product-price">{{product.price.toFixed(2)}}</td>
                    <td>
                      <button class="btn" @click="product.num > 1 ? product.num-- : ''">-</button>
                      <input class="product-num" :data-index="index" v-model="product.num">
                      <button class="btn" @click="product.num ++">+</button>
                    </td>
                    <td class="product-sum">{{(product.price * product.num).toFixed(2)}}</td>
                </tr>
                <tr>
                    <td colspan="3">总计</td>
                    <td id="totalnum">{{totalNum}}</td>
                    <td id="totalprice">{{totalPrice}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                cartInfo: {}
            },
            computed: {
                totalNum: function(){
                    let num = 0;
                    this.cartInfo.data.cartModels.forEach(item => {
                        num += item.num;
                    });
                    return num
                },
                totalPrice: function(){
                    let num = 0;
                    this.cartInfo.data.cartModels.forEach(item => {
                        num += item.num * item.price;
                    });
                    return num.toFixed(2)
                }
            },
            created() {
                this.getData()
            },
            methods: {
                getData() {
                    //$,ajax({
                    //    url:'xxxx',
                    //    type: 'GET',
                    //    data: {
                    //    },
                    //    success: function(res){
                    //        this.cartInfo=res.data
                    //    }
                    //})
                    this.cartInfo = {"success":true,"code":"0000","message":"操作成功","data":{"cartModels":
                    [{"productId":"100018955","name":"WORKPRO/万克宝-136PC 电钻组套(小)-(W004509N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/4/2b517b55-3519-4595-96f6-fd0279d19e8e-thumbnail.jpg","price":199.0,"num":14,"sum":2786.00},
                    {"productId":"100009828","name":"世达 V顶ABS标准安全帽 黄色 /1顶","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/6/1b762d34-ab42-45af-9e9d-1d7064de8585-170.jpg","price":27.37,"num":2,"sum":54.74},{"productId":"100018897","name":"WORKPRO/万克宝-综合工具组套 9PC 家用组套五金维修工具-(W009046N)/1套",
                    "imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/185ef417-cb9b-4b40-88c1-5f3866769c19-170.jpg","price":50.0,"num":2,"sum":100.00},{"productId":"100012580","name":"DCA-电磨头S1J-FF03-10 可调速直磨打磨机-(1302020020)/1把",
                    "imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/d956efe9-4f6f-4f71-a64d-99a9ff9da69c-170.jpg",
                    "price":145.0,"num":1,"sum":145.00},
                    {"productId":"100012749","name":"DREMEL/琢美-电磨机 雕刻 打磨机组套 4000-3/36-(F0134000RA)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/3e320e21-8ca3-48d9-bbe1-e3ef7a21c3f0-thumbnail.jpg","price":879.0,"num":1,"sum":879.00},
                    {"productId":"100019570","name":"WORKPRO/万克宝-工具组套 30PC-(W009047N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/5/445b9bdc-c1f6-4c50-9d4a-0d1b941d4e2f-thumbnail.jpg","price":122.0,"num":4,"sum":488.00},{"productId":"100000314","name":"东成-240W电磨机电磨头雕刻工具木雕根雕电动抛光打磨机直磨机 S1J-FF-25-(1301020030)/1台",
                    "imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2018/2/d2de6401-5aee-40d9-a79b-de10b0840797-170.jpg","price":151.0,"num":1,"sum":151.00}],"disabledCartModels":[],"totalPrice":4603.74}}     
                }
            },
        })
    </script>
</body>
</html>